import './App.css'
import React from 'react'

class Bpp extends React.Component {
  componentWillUnmount() {
    console.log('componentWillUnmount  Bpp组件被销毁了')
  }

  render() {
    return <h1>我是Bpp组件</h1>
  }
}

class App extends React.Component {
  constructor(props) {
    super(props)
    console.log(props, '构造函授执行')

    this.state = {
      name: '初始化',
      showBpp: true
    }
  }

  static getDerivedStateFromProps(props, state) {
    console.log(props, state, 'getDerivedStateFromProps函授执行')
    return null
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log(
      prevProps,
      prevState,
      'getSnapshotBeforeUpdate函授执行, 都是上一次的props和state的值'
    )
    // 长列表更新数据时可以通过这个方法记住滚轮的位置
    return { snapshot: 'componentDidUpdate 接收到的snapshot参数是这个方法的返回值' }
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log(prevProps, prevState, snapshot, 'componentDidUpdate 页面更新之后执行')
  }

  componentDidMount() {
    console.log('componentDidMount 组件挂载完成')
  }

  changeName = () => {
    this.setState({
      name: '修改后的name'
    })
  }

  changeBpp = () => {
    this.setState({
      showBpp: false
    })
  }

  render() {
    console.log('render渲染')

    const { name, showBpp } = this.state

    return (
      <div>
        <h1>{name}</h1>
        {showBpp && <Bpp />}
        <button onClick={this.changeName}>修改name</button>
        <button onClick={this.changeBpp}>changeBpp</button>
      </div>
    )
  }
}

export default App
